<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美福环球 - 客户信息列表</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        /* 所有样式已在index_html.html中定义，这里仅包含特定于客户列表页面的逻辑 */
        /* 完整样式请参考index_html.html中的style标签 */
    </style>
</head>
<body>
    <!-- 登录保护检查 -->
    <script>
        // 检查是否已登录
        const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true';
        if (!isAuthenticated) {
            // 未登录，重定向到登录页面
            window.location.href = 'kehu_login.html';
        }
    </script>

    <div class="customer-list">
        <header class="customer-list-header">
            <div class="container">
                <h1 class="customer-list-title">客户信息管理系统</h1>
                <button class="logout-btn" id="logout-btn">退出登录</button>
            </div>
        </header>
        
        <main class="container">
            <div class="customer-list-content">
                <h2 class="customer-list-subtitle">客户信息列表</h2>
                <p class="customer-list-count">共 <span id="customer-count">0</span> 条客户信息</p>
                
                <div class="customer-list-table">
                    <table id="customers-table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>电话</th>
                                <th>微信</th>
                                <th>提交时间</th>
                            </tr>
                        </thead>
                        <tbody id="customers-body">
                            <!-- 客户数据将通过JavaScript动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <div id="empty-customers" class="empty-customers" style="display: none;">
                    <i class="fas fa-inbox empty-customers-icon"></i>
                    <p class="empty-customers-text">暂无客户信息</p>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 退出登录
        document.getElementById('logout-btn').addEventListener('click', function() {
            localStorage.setItem('isAuthenticated', 'false');
            window.location.href = 'kehu_login.html';
        });
        
        // 加载客户数据
        function loadCustomers() {
            // 从localStorage获取客户数据
            const customers = JSON.parse(localStorage.getItem('customers') || '[]');
            
            // 更新客户数量
            document.getElementById('customer-count').textContent = customers.length;
            
            const tableBody = document.getElementById('customers-body');
            const emptyState = document.getElementById('empty-customers');
            
            if (customers.length > 0) {
                // 显示表格，隐藏空状态
                tableBody.style.display = 'table-row-group';
                emptyState.style.display = 'none';
                
                // 清空表格
                tableBody.innerHTML = '';
                
                // 添加客户数据
                customers.forEach((customer, index) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${index + 1}</td>
                        <td>${customer.name || '-'}</td>
                        <td>${customer.phone || '-'}</td>
                        <td>${customer.wechat || '-'}</td>
                        <td>${new Date(customer.timestamp).toLocaleString()}</td>
                    `;
                    tableBody.appendChild(row);
                });
            } else {
                // 显示空状态，隐藏表格
                tableBody.style.display = 'none';
                emptyState.style.display = 'block';
            }
        }
        
        // 页面加载时加载客户数据
        document.addEventListener('DOMContentLoaded', loadCustomers);
    </script>
</body>
</html>